<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>第一个JSP程序</title>
        <script type="text/javascript" src="../jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $(function() {
                //1.创建Ajax的方式,可以直接为包装器创建，这样ajax之后的内容会自动加载到包装器中
                //$("#content").load("01.html");
                // $("#content").load("01.html #c");

                /*
                    在URL中可以通过空格来插入相应的选择器，一下表示去01.html页面中获取id为c的元素加载进来
                */
                //load当使用第二个参数的时候自动使用post请求
                $("#content").load("01.html",function(data){
                    //function这个回调函数表示 加载完成之后的一些处理方式
                    //1.已经是完成了对content这个内容的处理之后才会调用该函数

                    //alert(data);


                    /**
                    * 特别注意
                    * 首先data是一个html类型的值 通过$(data)之后 会讲这个值包装为JQuery对象
                      在jQuery中包装一个document是这样来处理，会将所有的body根节点包装到包装器中
                      <body>
                          <h1>哈哈 加载成功！</h1>
                          <div id="c">呵呵呵！加载成功
                              <div id="c1">
                                  这个是c1中的内容
                              </div>
                          </div>

                      </body>
                    */

                    //获取h1的值, 无法使用find h1 是根对象，会被包装到包装器中 只能filter
                    //alert($(data).filter("h1").html());

                    //id为c1的元素是包装器中的元素 需要find
                    alert($(data).find("#c1").html());

                    //id为c
                    alert($(data).filter("#c").html());
                });
            });
        </script>
    </head>
    <body>
        <h1>使用JQuery实现Ajax</h1>
        <div id="content"></div>

    </body>
</html>
